import React, { lazy } from 'react'

//导入路由规则
import { Route } from 'react-router-dom'

//导入css样式,如果后导入会覆盖之前的样式
import './index.scss'

//导入TabBar样式
import { TabBar } from 'antd-mobile';

//导入子组件
import Index from '../Index'
// import HouseList from '../HouseList'
// import News from '../News'
// import Profile from '../Profile'


const HouseList = lazy(() => import('../HouseList'))
const News = lazy(() => import('../News'))
const Profile = lazy(() => import('../Profile'))







/* 
    问题：点击首页导航菜单，导航到找房列表页面的时候，找房菜单没有高亮

    原因：原来我们实现这个功能的时候，只考虑了点击以及第一次加载 Home 组件的情况，但是没有考虑不加载 Home 组件时的路由切换，因为这种情况下，我们的代码没有触发高亮事件

    解决：
        思路：在 路由切换的时候，也执行 菜单高亮 的逻辑代码
            1 添加 componentDidUpdata 钩子函数
            2 在钩子函数中判断路由地址是否切换（因为路由信息是通过 props 传递给组件的，所以通过比较更新前后的两个 props ）
            3 在路由地址切换时，让 菜单高亮

*/

export default class Home extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            //默认选项栏
            selectedTab: this.props.location.pathname,
        };
        this.info = [
            { title: "首页", icon: "icon-ind", path: "/home" },
            { title: "找房", icon: "icon-findHouse", path: "/home/list" },
            { title: "咨询", icon: "icon-infom", path: "/home/news" },
            { title: "我的", icon: "icon-my", path: "/home/profile" },
        ]
    }

    //遍历数组里面的数据然后渲染TabBar.Item
    renderTabBarItem() {
        return this.info.map(item => (
            <TabBar.Item
                icon={
                    <i className={`iconfont ${item.icon}`} />
                }
                selectedIcon={
                    <i className={`iconfont ${item.icon}`} />
                }
                title={item.title}
                key={item.title}
                selected={this.state.selectedTab === item.path}
                onPress={() => {
                    this.setState({
                        selectedTab: item.path,
                    });
                    //编程式导航
                    this.props.history.push(item.path)
                }}
            >
            </TabBar.Item>
        ))
    }


    componentDidUpdate(prevProps) {
        if (prevProps.location.pathname !== this.props.location.pathname) {
            this.setState(() => {
                return {
                    selectedTab: this.props.location.pathname
                }
            })
        }
    }


    //需要渲染的固定的数据
    render() {
        return (
            <div className='home'>
                {/* 配置路由规则 */}
                <Route exact path='/home' component={Index}></Route>
                <Route path='/home/list' component={HouseList}></Route>
                <Route path='/home/news' component={News}></Route>
                <Route path='/home/profile' component={Profile}></Route>
                {/* tabbar样式 */}
                <div style={{ position: 'fixed', width: '100%', bottom: 0 }}>
                    <TabBar
                        tintColor="rgb(33, 185, 122)"
                        barTintColor="white"
                        noRenderContent={true}
                    >
                        {this.renderTabBarItem()}
                    </TabBar>
                </div>
            </div>
        )
    }
}
